<template>
	<view class="page" :class="getThemeClass">
		<!-- <unavbar title="集碎片"></unavbar> -->
		<!-- <view class="gap-30"></view> -->
		<view class="compound-top" style="padding: 0; margin: 0;">
			<image class="goods-image" :src="msg.cover" mode="widthFix"></image>
			<view class="card-bg image-bottom"></view>
		</view>
		<view class="compound-top card-bg" style="padding-top: 20rpx;">
			<view class="size-32 text-bold">{{ msg.title }}</view>
			<view class="text-content size-24 u-m-t-20" style="line-height: 30rpx;">简介：{{ msg.desc }}</view>
			<view class="flex align-center u-m-t-30">
				<view class="my-goods-num-box text-tips">
					<text class="goods-num-unit">发行总量：</text>
					<text class="goods-num">{{ msg.total_issue }}件</text>
				</view>
				<view class="my-goods-num-box u-m-l-50 text-tips">
					<text class="goods-num-unit">剩余库存：</text>
					<text class="goods-num">{{ msg.sur_issue }}件</text>
				</view>
				<view class="my-goods-num-box u-m-l-50 text-tips">
					<text class="goods-num-unit">冻结时间：</text>
					<text class="goods-num">{{msg.sale_expire? `${msg.sale_expire}分钟` : '无'}}</text>
				</view>
			</view>
		</view>
		<view class="compound-top card-bg">
			<view class="size-32 text-bold">合成碎片</view>
			
			<template v-for="i in schemeList">
				<view class="" :key="i.type">
					<view class="size-28 u-m-t-30">{{ i.text }}</view>
					<view class="compound-list flex flex-wrap">
						<view class="pos-re margin-right-25 u-m-t-30" v-for="(item,index) in i.list" :key="index">
							<image :src="item.cover" mode="aspectFill" class="compound-suipian"></image>
							<!-- <view class="compound-tag">已获得：{{item.has_count}}/{{item.chip_num}}</view> -->
							<view class="compound-tag">{{item.has_count}}/{{item.chip_num}}</view>
							<view class="lock-box" v-if="item.has_count < item.chip_num">
								<image src="/static/images/lock_icon.png" class="lock-icon" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</template>
			
			<!-- <view class="flex align-center justify-center u-m-t-30">
				<text class="u-font-26" style="color: #A7ABAB;">集齐以上碎片即可合成一个新的藏品</text>
			</view> -->
		</view>
		<view class="p-t-100 flex justify-center align-center">
			<view class="comp-btn default-btn-bg u-m-r-30" @click="compound(true)">立即合成</view>
			<view class="comp-btn default-btn-bg" @click="compound(false)">一键合成</view>
			<!-- <view class="" style="width: 300rpx;">
				<botBtnp @click="showActionSheet = true" radius="50rpx">立即合成</botBtnp>
			</view>
			<view class="" style="width: 300rpx;">
				<botBtnp @click="showActionSheet = true" radius="50rpx">一键合成</botBtnp>
			</view> -->
		</view>
		<view class="gap-30"></view>
		
		<u-action-sheet
			class="my-action-sheet" 
			:list="schemeList" 
			v-model="showActionSheet" 
			@click="submit" 
			:cancel-btn="true"
		></u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id:'',
			msg: {},
			list: [],
			schemeList: [],
			showActionSheet: false, 
			
			hasNextPage:true
		};
	},
	onLoad(data) {
		this.id = data.id || ''
		this.loadData();
	},
	onPullDownRefresh() {
		this.loadData()
	},
	methods: {
		compound(type){
			this.hasNextPage = type
			this.showActionSheet = true
		},
		loadData() {
			this.$u.api.mix_detail({id:this.id}).then(res=>{
				this.msg = res.data.mix
				this.list = res.data.schemes
				this.schemeList = this.list.map((item, index) => {
					return {
						list: item.list,
						type: item.type,
						text: '方案' + ['一', '二', '三', '四', '五'][index],
						disabled: !(this.msg.sur_issue>0 && item.list.every(i => i.has_count >= i.chip_num)),
						subText: !this.msg.sur_issue? '暂无库存' : !item.list.every(i => i.has_count >= i.chip_num) && '当前方案碎片不足',
					}
				})
				console.log(this.schemeList);
			})
		},
		submit(index) {
			uni.showLoading({
				mask: 'true',
				title: '加载中...'
			})
			if(this.hasNextPage){
				this.$u.api.mix_compose({id:this.id, type: this.schemeList[index].type}).then(res=>{
					uni.hideLoading()
					if(res.code==200){
						uni.redirectTo({
							url:"./compound-get?id="+res.data.order.id+'&path='+res.data.path
						})
					}
				}, err => {
					uni.hideLoading()
				})
			}else{
				this.$u.api.batch_compose({id:this.id, type: this.schemeList[index].type}).then(res=>{
					uni.hideLoading()
					if(res.code==200){
						uni.showToast({
							title:"操作成功",
							icon:"none"
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1200)
					}
				}, err => {
					uni.hideLoading()
				})
			}
			
		}
	}
};
</script>

<style lang="scss">
	.comp-btn{
		width: 300rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
	}
.compound-top {
	width: 750rpx;
	margin: 0rpx 0rpx 30rpx 0rpx;
	margin-bottom: 40rpx;
	padding: 36rpx 24rpx;
	position: relative;
	// border-radius: 20rpx;
}
.compound-list{
	// padding-left: 30rpx;
	.pos-re{
		position: relative;
		.lock-box{
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
			background-color: rgba(0, 0, 0, .5);
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.lock-icon{
				width: 45rpx;
				height: 45rpx;
			}
		}
	}
	.compound-suipian{
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}
	.compound-tag{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		background-color: #D9C19D;
		// color: #FFFFFF;
		color: #2B2E2E;
		font-size: 16rpx;
		padding: 5rpx 10rpx;
		border-radius: 0 10rpx 0 10rpx;
	}
}

.p-t-100 {
	padding-top: 100rpx;
}

.goods-image{
	width: 750rpx;
}
.image-bottom{
	width: 100%;
	height: 50rpx;
	position: absolute;
	left: 0;
	bottom: 0;
	border-radius: 30rpx 30rpx 0 0;
}

.my-goods-num-box{
	font-size: 26rpx;
}
</style>
